<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理员注册界面</title>
    <link rel="stylesheet" href="../js/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../js/bootstrap-treeview/bootstrap-treeview.min.css">
    <link rel="stylesheet" href="../js/bootStrap-addTabs/bootstrap.addtabs.css">
    <link rel="stylesheet" href="../js/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="../js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../js/bootstrap-fileinput/css/fileinput.min.css">
    <link rel="stylesheet" href="../js/kindeditor-4.1.10/themes/default/default.css"/>
</head>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/bootstrap3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-treeview/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="../js/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="../js/bootstrap-bootbox/bootbox.js"></script>
<script type="text/javascript" src="../js/bootstrap-fileinput/js/fileinput.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-fileinput/js/locales/zh.js"></script>
<script type="text/javascript" src="../js/kindeditor-4.1.10/kindeditor-all.js"></script>
<body>

<!-- container-fluid 流式布局 -->
<div class="container-fluid">
    <form id="addForm" class="form-horizontal">
        <div class="row">
            <div class="col-xs-2">姓名</div>
            <div class="col-xs-4">
                <input type="text" id="adminname" name="adminname" class="form-control"/>
            </div>
            <div class="col-xs-2">类型</div>
            <div class="col-xs-4">
                <select name="roleid" id="roleid" class="form-control">
                    <option value="-1" selected>请选择</option>
                    <option value="1">管理员</option>
                    <option value="2">操作员</option>
                    <option value="3">投放员</option>
                </select>
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-xs-2">密码</div>
            <div class="col-xs-4">
                <input type="password" id="pwd1" name="adminpwd" class="form-control"/>
            </div>
            <div class="col-xs-2">确认密码</div>
            <div class="col-xs-4">
                <input type="password" id="pwd2" class="form-control"/>
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-xs-2">头像</div>
            <div class="col-xs-10">
                <input type="hidden" id="testimg" name="adminimg" />
                <input type="file" multiple class="projectfile" accept="image/*" name="img" id="headImg">
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-xs-5"></div>
            <div class="col-xs-2">
                <input type="button" value="提交" onclick="addBtn()" class="btn btn-success" />
            </div>
            <div class="col-xs-5"></div>
        </div>

        <!--<div class="row">
            <div class="col-xs-2">简介</div>
            <div class="col-xs-10">
                <textarea rows="5" cols="59" id="content" name="bjianjie"></textarea>
            </div>
        </div>-->
    </form>
</div>

</body>
<script type="text/javascript">

    //添加
    function addBtn(){
        alert("添加");
        if(!checkName() || !checkPwd()){
            return false;
        }
        $.ajax({
            url:"../admin/addAdmin",
            type:"post",
            data:$("#addForm").serialize(),
            success:function (data){
                alert("添加成功!");
                top.location.href="../backstage/index";
            },error() {
                alert("添加失败！")
            }
        })
    }

    /*var aaa = false;
    //空数据校验
    function isNullData(){
        if(checkName() && checkPwd()){
            aaa = true;
        }
        return false;
    }*/

    var flage = false;
    //校验用户是否已存在
    $("#adminname").blur(checkName=function(){

        var nameValue = $("#adminname").val();
        if(nameValue==null || nameValue==''){
            alert("用户名不能为空！");
            flage = false;
        }
        $.ajax({
            url: "../admin/isNullByName",
            type: "post",
            data: {"adminname":nameValue},
            success:function (data){
                if(data==false){
                    alert("用户已存在！");
                    flage = false;
                }else {
                    flage = true;
                }
            },error(){
                alert("校验用户出错");
            }
        })
        return flage;
    })
    //校验是否已选择身份
    $("#roleid").change(checkRole=function (){
        if($("#roleid").val()=='-1'){
            alert("请选择身份！");
            return false;
        }
        return true;
    })
    //校验两次密码是否一致
    $("#pwd2").blur(checkPwd=function (){
        var pwd1 = $("#pwd1").val();
        var pwd2 = $("#pwd2").val();
        if(pwd1==null || pwd1=='' || pwd2==null || pwd2==''){
            alert("密码不能为空!");
            return false;
        }
        if(pwd1!=pwd2){
            alert("两次密码不一致，请慎重输入！");
            return false;
        }
        return true;
    })

    //加载 datetimepicker 日期界面
    $(".date").datetimepicker({
        language:"zh-CN", 	//显示中文
        format:"yyyy-mm-dd hh:ii:ss",	//显示格式
        minView:"month",	//设置只显示到月份
        initialDate:new Date(),	//初始化当前时间
        autoclose:true,		//选中自动关闭
        todayBtn:true	//显示今日
    })

    //文件上传
    $('#headImg').fileinput({	//加载文件
        language: 'zh', //设置语言
        uploadUrl: '../file/uploadFiles', //文件要上传的路径、地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],	//后台能接收的文件类型
        showUpload: true, //是否显示上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn-success", //按钮样式--颜色  btn btn-danger 红色	btn btn-primary 蓝色	btn btn-success 绿色	btn btn-info 浅蓝
        dropZoneEnabled: true,//是否显示拖拽区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        maxFileSize: 0,//限制上传文件大小，单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 1, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",	//？？？
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

    }).on('fileuploaded', function(event, data, previewId, index) {	//上传后的回填
        var imgval = $('#testimg').val();
        if(imgval == null || imgval == "" || imgval == undefined){
            var path1 = data.response.img+"";
            imgval = path1.substring(15);
        }else{
            var path1 = data.response.img+"";
            imgval = path1.substring(15);
        }
        $('#testimg').val(imgval);
        //var attr=$(".file-caption-name").html();
        //var name=attr.substring(0,attr.lastIndexOf("."));//截取文件名
        //var type=attr.substring(attr.lastIndexOf(".")+1);//获取文件后缀
        //$("#fileoldname").val(name);
        //$("#filetype").val(type);
        //alert(name);
    });

    //KindEditor
/*    var editor;
    KindEditor.ready(function(K) {//将编辑器添加到文档中
        editor = K.create('#content', {
            cssPath : '<%=request.getContextPath()%>/js/kindeditor-4.1.10/plugins/code/prettify.css',
            //指定编辑器iframe document的CSS文件，用于设置 可视化区域的样式。
            uploadJson: "../js/kindeditor-4.1.10/jsp/upload_json.jsp",
            //指定上传文件的服务器端程序。
            fileManagerJson: "../js/kindeditor-4.1.10/jsp/file_manager_json.jsp",
            //指定浏览远程图片的服务器端程序。
            allowFileManager : true,//true时显示浏览远程服务器按钮 ;默认值: false
            //将富文本编辑中的内容同步到表单序列化中
            afterBlur:function(){this.sync();}
        });
    });*/

</script>
</html>